/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList,
    Input,
    InputDatalist,
    InputLine,
    LineColumn,
    Select,
    SuffixInput,
    Text,
    TextArea,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl,} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {工作介质选} from "./Internal/orcBase";
import {EditStorageContext} from "../StorageContext";
import {usePrefixDataEdit} from "../hook/usePrefixData";


interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}
export const itemA下结论=['资料审查','问题及处','安全评定','检验结论','结论压力','结论温度','结论介质','结论其它','检验日期','检验日期1','新下检日','结论说明'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const ConclusionBoiler=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">资料审查：</Text>
        [（包含上次检验提出问题及处理意见） ]
        <TextArea value={inp?.资料审查 || ''} rows={4} placeholder="（包含上次检验提出问题及处理意见）"
                  onChange={e => setInp({...inp, 资料审查: e.currentTarget.value || undefined})}/>
        <Text variant="h5">问题及其处理：</Text>
        [检验发现的缺陷位置、性质程度及处理意见（必要时附图或附页）]
        <TextArea value={inp?.问题及处 || ''} rows={8} placeholder="检验发现的缺陷位置、性质程度及处理意见（必要时附图或附页）"
                  onChange={e => setInp({...inp, 问题及处: e.currentTarget.value || undefined})}/>
        <hr/>
        <Text variant="h5">检验结论{'>>'}</Text>
        <InputLine  label='检查结论' >
            <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                 value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
                <option></option>
                <option>符合要求</option>
                <option>基本符合要求</option>
                <option>不符合要求</option>
            </Select>
        </InputLine>
        允许（监控）工作条件：
        <LineColumn column={4}>
            <InputLine  label='压力' >
                <SuffixInput  value={inp?.结论压力 ||''}
                              onChange={e=>setInp({ ...inp, 结论压力: e.currentTarget.value||undefined})}>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='温度' >
                <SuffixInput  value={inp?.结论温度 ||''}
                              onChange={e=>setInp({ ...inp, 结论温度: e.currentTarget.value||undefined})}>℃</SuffixInput>
            </InputLine>
            <InputLine  label='介质'>
                <InputDatalist value={inp?.结论介质 ||''}  datalist={工作介质选}
                      onListChange={v => setInp({ ...inp, 结论介质: v||undefined})} />
            </InputLine>
            <InputLine  label='其它' >
                <BlobInputList  value={inp?.结论其它 ||''} rows={4} onListChange={v => setInp({...inp,结论其它:v || undefined}) }/>
            </InputLine>
            <InputLine label='设置检验日期'>
                <Input value={inp?.检验日期 || ''} type='date'
                       onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
            </InputLine>
            <InputLine  label='检验起始日期' >
                <Input  value={inp?.检验日期1 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='下次检验日期' >
                <Input  value={inp?.新下检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        结论说明:
        <TextArea  value={inp?.结论说明 ||''} rows={10}
                   onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});


interface DeviceSurveyPrfProps extends InternalItemProps {
    //更通用考虑：允许动态配置
    config?: ((verId: string, orc: any) => any[]) | any[];
    title?: any;
}
/**特别的 设备概要编辑器: 配置上和原来DeviceSurvey组件有差别。配套使用 usePrefixDataTable 来展示报告的；
 * 两者不兼容的config配置。
 * */
export const DeviceSurveyPrf =
    React.forwardRef((
        {children, show, alone = true, verId, redId, nestMd, label, config,title}: DeviceSurveyPrfProps, ref
    ) => {
        const {storage, setStorage} = React.useContext(EditStorageContext) as any;
        const {inp, setInp} = useItemInputControl({ref});
        const newconfig = React.useMemo(() => {
            return (typeof config === 'function' ? config(verId!, storage) : config);
        }, [config, verId, storage]);
        //【重大】毛病啊config: 动态的就导致：死循环依赖热 【最后】接了一个useMemo包裹呢 @还不能用inp替换storage来做的。
        const [renderEditline, itemA概要] = usePrefixDataEdit({
            inp, setInp, config: newconfig!
        });
        const [getInpFilter] = useMeasureInpFilter(null, itemA概要,);
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {title??'设备概况相关，除在台账业务信息中可修改外还需修改的部分'}{''===title?'':':'}
            {renderEditline}
            {children}
        </InspectRecordLayout>;
});
